<template>
    <custom-page-box>
        <div class="info-issue-top">
            <div class="head">
                <a-button type="primary" class="editable-add-btn" icon="plus" @click="addInfo"> 发布信息 </a-button>
            </div>
            <a-table :columns="columns" :data-source="data" :pagination="false" rowKey="id" :scroll="{ y: height }">
                <span slot="num" slot-scope="text, record, index">
                    {{ (currentPage - 1) * pageSize + parseInt(index) + 1 }}
                </span>
                <template slot="scope" slot-scope="record">
                    <span v-if="Number(record) === -1">全体</span>
                    <span v-if="Number(record) === 4">服务商</span>
                    <span v-if="Number(record) === 5">投资商</span>
                    <span v-if="Number(record) === 6">政府端</span>
                </template>
                <template slot="mode" slot-scope="record">
                    <span v-if="record === 1">通知</span>
                    <span v-if="record === 2">推送</span>
                </template>
                <template slot="title" slot-scope="text, record">
                    <a-button type="link">
                        <nuxt-link
                            target="_self"
                            :to="{
                                name: 'platform-operation-Info-issue-id',
                                params: { id: record ? record.id : '' }
                            }"
                        >
                            {{ record ? record.title : '' }}
                        </nuxt-link>
                    </a-button>
                </template>
                <div slot="action" slot-scope="record">
                    <a-button class="red" @click="deleteItem(record.id)"> 删除 </a-button>
                </div>
            </a-table>
        </div>
        <custom-pagination
            :total="Number(total)"
            :page.sync="currentPage"
            :limit.sync="pageSize"
            @pagination="getTableData"
        ></custom-pagination>
    </custom-page-box>
</template>

<script>
export default {
    name: 'InfoIssue',
    data () {
        return {
            data: [],
            columns: [
                {
                    title: '序号',
                    width: '5%',
                    dataIndex: 'num',
                    key: 'num',
                    scopedSlots: { customRender: 'num' }
                },
                {
                    title: '消息标题',
                    dataIndex: 'title',
                    key: 'title',
                    ellipsis: true,
                    width: 300,
                    scopedSlots: { customRender: 'title' }
                },
                {
                    title: '发布人',
                    dataIndex: 'fromUserName',
                    key: 'fromUserName'
                },
                {
                    title: '发布时间',
                    dataIndex: 'createTime',
                    key: 'createTime',
                    ellipsis: true
                },
                {
                    title: '接受范围',
                    dataIndex: 'scope',
                    key: 'scope',
                    ellipsis: true,
                    scopedSlots: { customRender: 'scope' }
                },
                {
                    title: '类型',
                    dataIndex: 'mode',
                    key: 'mode',
                    ellipsis: true,
                    scopedSlots: { customRender: 'mode' }
                },
                {
                    title: '操作',
                    dataIndex: '',
                    key: 'x',
                    scopedSlots: { customRender: 'action' }
                }
            ],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            height: 650
        }
    },
    mounted () {
        this.getTableData()
        const arr = document.querySelector('.ant-table-wrapper')
        this.height = arr.offsetHeight - 59 + 8
    },
    methods: {
        async getTableData () {
            const res = await this.$ApiServer['operate/info/list']({
                type: 1,
                currentPage: this.currentPage,
                pageSize: this.pageSize
            })
            if (res.code === 200) {
                this.data = res.data.data.page.records
                this.total = res.data.data.page.total
            }
        },
        addInfo () {
            this.$router.push({
                name: 'platform-operation-Info-issue-add'
            })
        },
        deleteItem (id) {
            const that = this
            this.$confirm({
                title: '你确定要删除该消息吗？',
                okText: '确定',
                cancelText: '取消',
                async onOk () {
                    const res = await that.$ApiServer['operate/info/delete']([id])
                    if (res.code === 200) {
                        that.$message.success('删除成功')
                        that.getTableData()
                    } else {
                        that.$message.error(res.message)
                    }
                },
                onCancel () {}
            })
        }
    }
}
</script>

<style lang="less" scoped>
.head {
    height: 50px;
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid #f3f3f3;
    margin-bottom: 10px;
}
.ant-table-wrapper {
    background-color: #fff;
    padding: 10px 20px;
    height: calc(100vh - 60px - 10px - 50px - 20px - 10px - 50px);
    ::v-deep {
        .ant-table-title {
            display: none;
        }
    }
}
.info-issue-top {
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
}
</style>
